<template>
  <div class="detail-page "  >
    <div class="swipe-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in proDetail.carouselList" :key="index">
          <img :src="item.url" class="swipe-item" />
        </van-swipe-item>
        
      </van-swipe>

      <van-nav-bar class="nav-bar" left-text="返回" left-arrow>
        <template #left>
          <div class="nav-left">
            <van-icon
              name="arrow-left"
              size="25px"
              color="white"
              @click="router.back()"
            />
            <span class="back-text">返回</span>
          </div>
        </template>
        <template #right>
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
          <van-icon
            name="share-o"
            size="25px"
            color="white"
            @click="showShare = true"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="product-info">
      <div class="price-row">
        <div class="price">
          <span class="symbol">￥</span>
          <span class="amount">5299</span>
          <span class="original-price">￥8999</span>
        </div>
        <div class="sale-count">3次寄售</div>
      </div>
      <div class="title-row">
        <van-tag type="danger" size="medium">寄售</van-tag>
        <span class="product-title">和田玉碧玉腕间柔情玉镯TH11105800</span>
      </div>
    </div>

    <div class="service-info">
      <div class="service-item">
        <van-icon name="certificate" color="#ee0a24" size="16" />
        <span>正品保障</span>
      </div>
      <div class="service-item">
        <van-icon name="replay" color="#ee0a24" size="16" />
        <span>7天无理由退换货</span>
      </div>
    </div>

    <div class="shop-info">
      <div class="shop-header">
        <div class="shop-left">
          <img src="../../images/sz2.jpg" class="shop-avatar" />
          <div class="shop-detail">
            <div class="shop-name">泰和和田玉</div>
            <div class="shop-stats">
              <span>200</span>
              <span class="stat-label">关注人数</span>
              <span class="stat-divider">|</span>
              <span>155</span>
              <span class="stat-label">全部商品</span>
            </div>
          </div>
        </div>
        <van-button type="danger" size="small" class="follow-btn"
          >+ 关注</van-button
        >
      </div>
    </div>

    <div class="product-params">
      <div class="params-title">商品信息</div>
      <div class="params-table">
        <div class="param-row">
          <div class="param-cell">
            <span class="param-label">品种</span>
            <span class="param-value">白玉</span>
          </div>
          <div class="param-cell">
            <span class="param-label">颜色</span>
            <span class="param-value">白色</span>
          </div>
        </div>
        <div class="param-row">
          <div class="param-cell">
            <span class="param-label">现货</span>
            <span class="param-value">无</span>
          </div>
        </div>
        <div class="param-row">
          <div class="param-cell">
            <span class="param-label">设计人姓名</span>
            <span class="param-value">泰和</span>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-container">
      <van-tabs v-model:active="activeTab" sticky>
        <van-tab title="商品详情">
          <div class="detail-content">
            <template v-for="(item,index) in proDetail.detailImageList" :key="index">
            <img :src="item.url" class="detail-img" />
          </template>
          </div>
        </van-tab>

        <van-tab title="寄售记录">
          <div class="sale-records">
            <div
              class="record-item"
              v-for="(record, index) in saleRecords"
              :key="index"
            >
              <div class="record-left">
                <img :src="record.avatar" class="user-avatar" />
                <div class="record-info">
                  <div class="user-name">{{ record.name }}</div>
                  <div class="record-date">{{ record.date }}</div>
                </div>
              </div>
              <div class="record-price">{{ record.price }}</div>
            </div>
          </div>
        </van-tab>

        <van-tab title="鉴定报告">
          <div class="cert-content">
            <img src="../../images/zs.jpg" class="cert-img" />
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="bottom-bar">
      <div class="bottom-bar-left">
        <div class="action-item" @click="router.push('/Home')">
          <van-icon name="wap-home-o" size="20" />
          <span>首页</span>
        </div>
        <div class="action-item">
          <van-icon name="shop-o" size="20" />
          <span>店铺</span>
        </div>
        <div class="action-item" @click="goChat">
          <van-icon name="chat-o" size="20" />
          <span>客服</span>
        </div>
        <div class="action-item">
          <van-icon name="star-o" size="20" />
          <span>收藏</span>
        </div>
      </div>
      <div class="bottom-bar-right">
        <van-button type="warning" class="action-button">加入购物车</van-button>
        <van-button type="danger" class="action-button">立即购买</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onBeforeMount } from "vue";
import { getProDetail } from "@/api/product/product";
import { useRoute, useRouter } from "vue-router";

const proDetail = ref({})
const route = useRoute()
const router = useRouter()

async function init(){
  let res = await getProDetail({id:route.query.id})
  if(res.code == 200){
    proDetail.value = res.data
  }
}

function goChat(){
  router.push({path:'/chat',query:{userId:proDetail.value.release_id}})
}
onBeforeMount(()=>{
  init();
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  border: none;
}

.detail-page {
 overflow-y: hidden;
  position: relative;
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 50px;
}

.swipe-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 12px;
}

.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  --van-nav-bar-background: none;
  border: none;
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.my-swipe {
  width: 100%;
  height: 450px;
  border-radius: 0;
  overflow: hidden;
}

.swipe-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  display: block;
  margin: 0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 3px;
}

.back-text {
  font-size: 16px;
  color: white;
}

:deep(.van-nav-bar__text),
:deep(.van-nav-bar__arrow) {
  display: none;
}

/* 分享图标基础样式 */
:deep(.share-icon .van-icon) {
  width: 50px !important;
  height: 50px !important;
  font-size: 24px !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #555;
}

/* 微信图标 */
:deep(.wechat .van-icon) {
  background-color: #07c160;
}

/* 朋友圈图标 */
:deep(.moments .van-icon) {
  background-color: #95ec69;
}

/* 分享面板样式调整 */
:deep(.van-share-sheet-item__icon) {
  margin-bottom: 8px;
}

:deep(.van-share-sheet-item__name) {
  font-size: 12px;
  color: #333;
}

:deep(.van-share-sheet__title) {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.van-nav-bar .van-icon {
  color: white;
}

.product-info {
  padding: 12px 16px;
  margin: 12px 12px 0;
  background-color: #fff;
  border-radius: 8px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.price {
  display: flex;
  align-items: baseline;
}

.symbol {
  color: #ee0a24;
  font-size: 16px;
  font-weight: bold;
}

.amount {
  color: #ee0a24;
  font-size: 24px;
  font-weight: bold;
  margin-right: 8px;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.sale-count {
  color: #999;
  font-size: 14px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-title {
  font-size: 16px;
  color: #323233;
  line-height: 1.4;
}

:deep(.van-tag--danger) {
  background-color: #ee0a24;
  padding: 0 6px;
}

.service-info {
  margin: 12px 12px 0;
  padding: 12px 16px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  gap: 24px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.service-item .van-icon {
  flex-shrink: 0;
}

.shop-info {
  margin: 12px 12px 0;
  padding: 12px 16px;
  background-color: #fff;
  border-radius: 8px;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.shop-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-name {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

.shop-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #969799;
  font-size: 13px;
}

.stat-label {
  color: #969799;
}

.stat-divider {
  margin: 0 8px;
  color: #ebedf0;
}

.follow-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 4px;
}

:deep(.follow-btn) {
  background-color: #ee0a24 !important;
  border: none !important;
  color: #fff !important;
}

.product-params {
  margin: 12px 12px 0;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.params-title {
  font-size: 14px;
  color: #323233;
  margin-bottom: 16px;
}

.params-table {
  background-color: #fff;
}

.param-row {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}

.param-row:last-child {
  border-bottom: none;
}

.param-cell {
  flex: 1;
  display: flex;
  padding: 12px 0;
  align-items: center;
}

.param-label {
  color: #969799;
  font-size: 13px;
  width: 80px;
}

.param-value {
  color: #323233;
  font-size: 13px;
}

.tab-container {
  margin: 12px 12px 0;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.detail-content {
  padding: 0;
}

.detail-img {
  width: 100%;
  display: block;
}

/* 寄售记录样式 */
.sale-records {
  padding: 16px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.record-item:last-child {
  border-bottom: none;
}

.record-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 14px;
  color: #323233;
}

.record-date {
  font-size: 12px;
  color: #969799;
}

.record-price {
  font-size: 16px;
  color: #ee0a24;
  font-weight: 500;
}

/* Tab 样式 */
:deep(.van-tabs__wrap) {
  border-bottom: 1px solid #f5f5f5;
}

:deep(.van-tabs__nav) {
  background-color: #fff;
}

:deep(.van-tab) {
  color: #646566;
  font-size: 14px;
}

:deep(.van-tab--active) {
  color: #323233;
  font-weight: 500;
}

:deep(.van-tabs__line) {
  background-color: #ee0a24;
  width: 20px !important;
  height: 3px;
  border-radius: 3px;
}

.cert-content {
  padding: 16px;
  display: flex;
  justify-content: center;
}

.cert-img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.bottom-bar-left {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  color: #666;
}

.action-item .van-icon {
  margin-bottom: 4px;
}

.bottom-bar-right {
  display: flex;
  gap: 8px;
}

.action-button {
  height: 36px;
  padding: 0 15px;
  font-size: 14px;
}

:deep(.van-button--warning) {
  background-color: #ff976a;
  border-color: #ff976a;
}

:deep(.van-button--danger) {
  background-color: #ee0a24;
  border-color: #ee0a24;
}
</style>
